<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    @import "link.html"

</head>
<body id="main-js" class="easyui-layout">
<div data-options="region:'center'">
    <table id="juese-tb"></table>
</div>
<script>
  $(function () {
    $('#juese-tb').datagrid({
      url: '../assets/json/datagrid_data1.json',
      method: 'get',
      border: false,
      singleSelect: true,
      // fit:true,
      // fitColumns:true,
      columns: [[
        {field: 'itemid', title: 'Item ID'},
        {field: 'productid', title: 'Product ID'},
        {field: 'listprice', align: 'right', title: 'listprice'},
        {field: 'unitcost', align: 'right', title: 'unitcost'},
        {field: 'attr1', title: 'attr1'},
        {
          field: 'opt', title: '操作', align: 'center', width: 200,
          formatter: function (value, row, index) {
            // console.log(row);
            return '<a href="javascript:" data-id="'+row.itemid+'" class="easyui-linkbutton warning">删除</a>\n' +
              '    <a href="javascript:" class="easyui-linkbutton error">新增</a>'
          }
        }
      ]],
      onLoadSuccess: function (data) {
        $("a.easyui-linkbutton").linkbutton();
        $('.easyui-linkbutton').on('click',function () {
          console.log($(this).attr('data-id'));
          $('#main-js').layout('add',{
            region: 'east',
            width: 180,
            title: '操作面板',
            split: true,
            tools: [{
              iconCls:'icon-add',
              handler:function(){alert('add')}
            },{
              iconCls:'icon-remove',
              handler:function(){alert('remove')}
            }]
          });
        });
      }
    });
  });
</script>
</body>
</html>